<template>
  <a-transfer
    :dataSource="allRoleData"
    showSearch
    :listStyle="{
      width: '300px',
      height: '300px',
    }"
    :titles="['未授权角色', '已授权角色']"
    :filterOption="filterOptionRole"
    :targetKeys="roleTargetKeys"
    @change="handleChangeRole"
    @search="handleSearchRole"
    :render="item=>item.title"
  >
  </a-transfer>
</template>

<script>
export default {
  data () {
    return {
      allRoleData: [],
      roleTargetKeys: []
    }
  },
  created () {
  },
  methods: {
    setDataSource (data) {
      console.log(data)
      if (data) {
        const roleList = []
        for (let i = 0; i < data.length; i++) {
          const item = data[i]
          roleList.push({
            key: item.roleId.toString(),
            title: item.roleName,
            description: item.remarks ? item.remarks : '',
            disabled: false
          })
        }
        this.allRoleData = roleList
      }
    },
    setTargetKeys (data) {
      this.roleTargetKeys = data
    },
    filterOptionRole (inputValue, option) {
      return option.roleName.indexOf(inputValue) > -1
    },
    handleChangeRole (targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys)
      this.roleTargetKeys = targetKeys
    },
    handleSearchRole (dir, value) {
      console.log('search:', dir, value)
    }
  }
}
</script>
